<template>
  <div>
    <h2>无限加载</h2>
    <div class="lists">
      <li v-for="(item,index) in lists" :key="index" class="item">
        {{ item.name }} —— {{ item.info }}
      </li>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lists: [
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        }
      ],
      data: [
        {
          name: '——————',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        },
        {
          name: '张三',
          info: '锄禾日当午'
        }
      ]
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScoll)
  },
  methods: {
    check () {
      function lowEnough () {
        var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight)
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        return pageHeight - viewportHeight - scrollHeight < 200 // 通过 真实内容高度 - 视窗高度 - 上面隐藏的高度 < 20，作为加载的触发条件
      }
      let isEnd = lowEnough()
      if (isEnd) {
        this.lists.push(...this.data)
        // this.$nextTick(() => { // 移动到新页第一个
        //   window.scrollTo(window.pageXOffset, window.pageYOffset + 770)
        // })
      }
    },
    handleScoll () { // 监听滚动，转换canvas为单色位图
      this.throttle(this.check, 300)
    },
    throttle (method, time) { // 节流
      clearTimeout(method.tId)
      method.tId = setTimeout(function () {
        method()
      }, time)
    }
  }
}
</script>

<style lang="scss" scoped>
  .lists{
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: auto;
    .item{
      width: 100%;
      padding: 30px 0;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
</style>
